import React from 'react'
import './Home.css'
import { Image } from 'react-bootstrap'

export default class Home extends React.Component {
  constructor() {
    super()
    this.state = {
      index: 0
    }
  }

  randomImage() {
    setInterval(() => {
      let index = parseInt(Math.random() * 99)
      if (this.state) {
        this.setState({
          index: index
        })
      }
    }, 3000)
  }

  componentDidMount() {
    this.randomImage()
  }

  reduce() {
    alert('reduct num')
  }
  add() {
    alert('add num')
  }

  max() {
    alert('maximum num')
  }

  render() {
    return (
      <div className='home' id="home">
        <Image className='home-lighting' src="images/home/lighting.png" />
        <div className='home-content'>
          <Image className='home_img_mission_zella' src="images/home/mission_zella.png" />
          <div className='home-content-item'>
            <div>A group of pioneers are ready to get on board for</div>
            <div>the Mission Zella. The plan is to travel through</div>
            <div>88,000 light-years with starships, aiming at</div>
            <div>finding a new shelter for human beings, the</div>
            <div>earth-like planet Zella.</div>
          </div>
          <div className='home-content-item'>
            <div>However, due to the wrong operation of launch</div>
            <div>scientist Andy, the time setting was added with a</div>
            <div>zero, and these interstellar vehicles immediately</div>
            <div>passed through 880,000 light-years later. Will</div>
            <div>Zella still be the original environment suitable for</div>
            <div>survival? Or will it be a wild land full of</div>
            <div>surprises?</div>
          </div>
          <div className='home-content-item'>
            Commander, the troop is ready for your order!
          </div>
          <div className='home-content-item'>
            Let's join the troop and win the reward of
          </div>
          <div className='home-content-item-last'>
            8.5 ETH.
          </div>
        </div>
        <div className='home-right'>
          <div className='home-right-box'>
            <Image className='home-right-pic' src={"images/charactors/" + this.state.index + ".jpg"} />
          </div>
          <div className='home-right-bottom'>
            <div className='home-bar-box'>
              <div className='modification-bar'>
                <div className='reduce' onClick={() => { this.reduce() }}>-</div>
                <div className='num'>5</div>
                <div className='add' onClick={() => { this.add() }}>+</div>
                <div className='max' onClick={() => { this.max() }}>Max</div>
              </div>
              <div className='home-digit'>001 / 100</div>
              <Image className='home-right-bar' src="images/home/bar.png" />
            </div>
            <div className='home-ring-box'>
              <div className='home-ring-text'>Mint a pioneer</div>
              <Image className='home-ring' src="images/home/ring.png" />
            </div>
          </div>
        </div>
      </div>
    )
  }
}